<template>
  <el-container>
    <el-container>
      <el-main style="height: 30vh;overflow-y: hidden">
        <el-card style="width: 900px; margin: 10px;background-color: #e5e5e5;float:left;height: 300px">
          <div style="width: 30% ;float:left;" >
            <img style="width: 200px;height: 200px" src="http://rxs18bfmd.hd-bkt.clouddn.com/touxiang.jpg" alt="">
          </div>
          <div style="width: 70%;float:right;">
            <span style="font-size: 60px">{{ state.form.stuName }}</span>
            <hr>
            <div style="float: left;width: 50%">
              <el-form-item label="学生ID:" >
                <el-text size="large">{{state.form.stuId}}</el-text>
              </el-form-item>
              <el-form-item label="学生电话号码" >
                <el-text size="large">{{state.form.stuPhone}}</el-text>
              </el-form-item>
              <el-form-item label="小组名称" >
                <el-text size="large">{{state.form.teamName}}</el-text>
              </el-form-item>
            </div>
            <div style="float: left;width: 50%" >
              <el-form-item label="学校名称:" style="height: 30%">
                <el-text size="large">{{state.form.scName}}</el-text>
              </el-form-item>
              <el-form-item label="当前分数:" style="height: 70%;font-size: 30px" >
                <el-text style="font-size: 30px" class="scoring">{{state.form.stuRecode}}</el-text>
              </el-form-item>
            </div>
          </div>
        </el-card>

      </el-main>
      <el-footer style="height: 40vh">
        <p style="font-size:25px">小组成员</p><br>
        <el-row>
        <el-card v-for="(item,index) in kk.tableData " :key='index' style="width: 22%">
          <div style="width: 50%;text-align:right" >
            <img src="http://rxs18bfmd.hd-bkt.clouddn.com/touxiang.jpg" alt="image" style="height: 40px">
          </div>
          <p>姓名：{{ item.stuName }}</p>
          <p>电话：{{item.stuPhone}}</p>
        </el-card>
        </el-row>
      </el-footer>
    </el-container>
    <el-aside>
      <el-calendar v-model="calendar" style="width: 400px;height: 100px;float:right;" />
    </el-aside>
  </el-container>
</template>


<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";
const { proxy }=getCurrentInstance()

    const state=reactive({
      form:{},
      scoring:""
    })
    state.form=localStorage.getItem("student") ? JSON.parse(localStorage.getItem("student")) : {}
    console.log(state.form)
    const calendar = ref(new Date())

    const load = () => {
      request.post('/student/listPage',JSON.stringify(page)).then(res=>{
        if(res.code===200) {
          kk.tableData = res.data
          kk.total=res.total
        }
      })
    }

    const page=reactive({
      pageNum:ref(1),
      pageSize:ref(10),
      param:{
        team_id:ref(state.form.teamId)
      }
    })

    load()

    //页数
    const handleSizeChange=(val)=>{
      page.pageSize=val
      load()
    }
    //每页数量
    const handleCurrentChange=(val)=>{
      page.pageNum=val
      load()
    }

    const reset=()=>{
      page.param.stu_name="";
      load()
    }


    //数据
    const kk = reactive({
      tableData: [],
      total:0,
      form:{},
      rules:{
        stuPhone: [
          { required: true, message: '请输入学生电话', trigger: 'blur' },
        ],
        stuName: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
        ],
        teamId: [
          { required: true, message: '请输入学生所在团队ID', trigger: 'blur' },
        ],
        scId: [
          { required: true, message: '请输入所在学校ID', trigger: 'blur' },
        ],
        stuRecode: [
          { required: true, message: '请输入学生分数', trigger: 'blur' },
        ],
      }
    })

</script>

<style>
   .el-aside{
     width: 60vh;
   }
   .scoring{
     color:red;
   }
   .el-calendar-table .el-calendar-day{
     width: 60px;
     height: 40px;
   }
</style>

